<template>
  <div class="mycontainer">
    <div class="card" :class="{ 'card-width': !showInfo }">
      <header class="card-header">
        <h2>UUID 生成器</h2>
        <div class="card-header-buttonarea">
          <div class="info-button" @click="showInfo = !showInfo">
            工具介绍
          </div>
        </div>
      </header>
      <main class="card-body">
        <label for="count-input">
          生成数量:
          <input type="number" id="count-input" v-model.number="count" min="1" max="1000" />
        </label>
        <button @click="generateUUIDs" class="generate-button">生成 UUID</button>
        <button v-if="uuids.length > 0" @click="copyToClipboard" class="copy-button">复 制</button>
        <button v-if="uuids.length > 0" @click="clear" class="clear-button">清 空</button>
        <textarea ref="uuidTextArea" readonly :value="uuids.join('\n')" class="output-textarea" @mousedown="startResize"
          @mousemove="resize" @mouseup="endResize"></textarea>
      </main>
    </div>
    <!-- 工具介绍 -->
    <div class="card-info" v-show="showInfo">
      <div class="card-info-header">
        <div>
          工具介绍
        </div>
        <div class="card-info-buttonarea">
          <img :src=closeicon class="card-info-button" @click="closeInfo">
        </div>
      </div>

      <div class="card-info-title">
        批量随机生成UUID的工具
      </div>
      <div class="card-info-content">
        <p>在线随机UUID生成器，支持批量生成大量UUID（通用唯一识别码）。</p>
        <p>使用JS随机数生成器生成，每次生成的UUID都是独一无二的，但不能保证多次生成不会重复，即使重复概率非常非常小。</p>
        <p>UUID是通用唯一识别码（Universally Unique Identifier）的缩写，一种由算法生成的二进制长度为128位的数字标识符。</p>
        <p>UUID 的格式为“xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx”，其中的 x 是 0-9 或 a-f 范围内的一个32位十六进制数。</p>
        <p>在理想情况下，任何计算机和计算机集群都不会生成两个相同的UUID。</p>
        <p>UUID 的主要目的是为对象或记录生成一个唯一的标识符，而不需要依赖外部的标识符或名称。</p>
      </div>
    </div>
  </div>

</template>

<script>
// 其他组件中
export default {
  data() {
    return {
      count: 1,
      uuids: [],
      textareaHeight: 100,
      resizing: false,
      closeicon: require('@/assets/icons/close.png'),
      showInfo: true
    };
  },
  methods: {
    generateUUID() {
      return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
        var r = (Math.random() * 16) | 0,
          v = c === 'x' ? r : (r & 0x3) | 0x8;
        return v.toString(16);
      });
    },
    generateUUIDs() {
      this.uuids = [];
      if (this.count > 100) {
        this.$toast('最大支持输入100', 2000, 50);
        return;
      }
      for (let i = 0; i < this.count; i++) {
        this.uuids.push(this.generateUUID());
      }
    },
    copyToClipboard() {
      this.$refs.uuidTextArea.select();
      document.execCommand('copy');
      // alert('UUIDs 已复制到剪贴板!');
      // this.$huhaAlert('UUIDs 已复制到剪贴板!');
      this.$toast('已复制到剪贴板!', 1000, 50);
    },
    startResize(event) {
      this.resizing = true;
      this.textareaHeight = event.clientY;
      window.addEventListener('mouseup', this.endResize);
    },
    resize(event) {
      if (this.resizing) {
        const delta = event.clientY - this.textareaHeight;
        this.$refs.uuidTextArea.style.height = `${this.$refs.uuidTextArea.offsetHeight + delta}px`;
      }
    },
    endResize() {
      this.resizing = false;
      window.removeEventListener('mouseup', this.endResize);
    },
    clear() {
      this.uuids = [];
    },
    closeInfo() {
      this.showInfo = false;
    }
  },
};
</script>

<style scoped>
.mycontainer {
  display: flex;
  flex-direction: row;
}

.card,
.card-info {
  background-color: #fff;
  border-radius: 20px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  overflow: hidden;
  width: 60%;
}

.card-width {
  width: 100%;
}

.card-info {
  margin-left: 10px;
  width: 40%;
}

.card-info-header {
  display: flex;
  justify-content: space-between;
  padding: 20px;
  background-color: #fff;
  font-size: 12px;
  color: #8d9fb3;
}

.card-header-buttonarea {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
}

.info-button{
  padding: 10px;
  color: #5d5353;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  height: 30px;
  font-size: 14px;
}

.card-info-buttonarea {
  display: flex;
  justify-content: flex-end;
}

.card-info-button {
  width: 15px;
  height: 15px;
}

.card-info-title {
  padding: 20px;
  margin-top: -20px;
  background-color: #fff;
  font-size: 24px;
  font-weight: bolder;
  color: #000000;
}

.card-info-content {
  padding: 20px;
  margin-top: -20px;
  background-color: #fff;
  font-size: 14px;
  color: #4b4444;
}

.card-header {
  display: flex;
  flex-direction: column;
  padding: 20px;
  background-color: #fff;
  border-bottom: 1px solid #ddd;
  height: 90px;
}

.card-body {
  padding: 20px;
}

.generate-button {
  margin-top: 10px;
  margin-bottom: 15px;
  padding: 10px 20px;
  background-color: #007aff;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.copy-button {
  margin-top: 10px;
  margin-left: 20px;
  margin-bottom: 15px;
  padding: 10px 20px;
  background-color: #8d9fb3;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.clear-button {
  margin-top: 10px;
  margin-left: 20px;
  margin-bottom: 15px;
  padding: 10px 20px;
  background-color: #8d9fb3;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.output-textarea {
  width: 100%;
  height: 300px;
  resize: none;
  border: 1px solid #ddd;
  padding: 10px;
  box-sizing: border-box;
  line-height: 1.5;
}

label {
  display: block;
  margin-bottom: 10px;
}

input[type="number"] {
  width: 100px;
  padding: 5px;
  border: 1px solid #ddd;
  border-radius: 4px;
}
</style>